<template>
  <div class="r-box">
    <div class="r-top">
      <div class="r-tt">
        <span>包含这首歌的歌单</span>
      </div>
      <div class="r-but" v-for="play in playlists" :key="play.coverImgId" >
        <a @click="goplaylists(play.id)" ><img :src="play.coverImgUrl" alt="" /></a>
        <div class="r-btn-r">
          <p class="btn-name">
            <a @click="goplaylists(play.id)">{{ play.name }}</a>
          </p>
          <p class="btn">
            <span>by</span>
            <a @click="gouserhome(play.userId)">{{ play.creator.nickname }}</a>
          </p>
        </div>
      </div>

      <!-- 相似歌曲 -->
      <div class="r-tt">
        <span>相似歌曲</span>
      </div>

      <!-- 歌曲LIST -->
      <div class="ty-box" v-for="songList in songs" :key="songList.id">
        <!-- 左边名字 -->
        <div class="ty-l">
          <a class="ai"  @click="gosong(songList.id)">{{ songList.name }}</a>
          <a class="aii"  @click="goartist(songList.artists[0].id)">{{ songList.artists[0].name }}</a>
        </div>
        <!--标签一二 -->
        <div class="ty-r">
          <a
            class="iconi"
            @click="addsong(songList.id, songList.album.blurPicUrl)"
          ></a>
          <a
            class="iconii"
            @click="addplaylist(songList.id, songList.album.blurPicUrl)"
          ></a>
        </div>
      </div>
    </div>
  </div>

  <!-- <gg-dateRuler></gg-dateRuler> -->
</template>

<script>
export default {
  data() {
    return {
      // 传过来的id
      id: this.$route.query.ids,
      // 包含歌单
      playlists: [],
      // 相似歌曲数据
      songs: [],
    };
  },
  mounted() {
    this.getSimilarityPlay();
    this.getSimilaritySong();
  },
  methods: {
    // reqSimilarityPlay获取相似歌单
    async getSimilarityPlay() {
      const result = await this.$API.reqSimilarityPlay(this.id);
      // console.log(result)
      if (result.code == 200) {
        this.playlists = result.playlists;
      } else {
        alert("包含歌单出错");
      }
    },
    // reqSimilaritySong 获取相似歌曲
    async getSimilaritySong() {
      const result = await this.$API.reqSimilaritySong(this.id);
      // console.log(result)
      if (result.code == 200) {
        this.songs = result.songs;
      } else {
        alert("获取相似歌曲失败");
      }
    },
    // 给下面传音乐
    addsong(ids, picUrl) {
      this.$store.dispatch("getDetailList",ids)
      const big = {
        ids,
        picUrl,
      };
      this.$bus.$emit("singid", big);
    },
    // 添加音乐
    addplaylist(ids){
      this.$store.dispatch("getDetailList",ids)
    },
        // 跳转歌手
    goartist(id) {
      this.$router.push(`/artist?id=${id}`);
      // console.log(id)
    },
    // 跳转歌曲页
    gosong(id) {
       this.$router.push(`/song?ids=${id}`);
    },
    // 歌单
    goplaylists(id){
       this.$router.push(`/playlists?id=${id}`);
    },
    //主页
    gouserhome(id){
      this.$router.push(`/userhome?id=${id}`);
    }
  },
};
</script>

<style lang="less" scoped>
// 公共样式头部
.r-tt {
  padding-top: 10px;
  width: 100%;
  height: 30px;
  border-bottom: rgb(204, 204, 204) 1px solid;
  span {
    font-size: 14px;
    font-weight: bold;
    color: rgb(41, 23, 178);
  }
}

// 大盒子
.r-box {
  //
  .r-top {
    width: 200px;
    // height: 300px;
    margin: 0 auto;

    .r-but {
      margin-top: 10px;
      display: flex;
      img {
        height: 50px;
        width: 50px;
      }
      .r-btn-r {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        .btn-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-wrap: normal;
          width: 140px;
          a {
            color: #000;
            white-space: nowrap;
            word-wrap: normal;
          }
        }
        .btn {
          margin-top: 5px;
          display: flex;
          span {
            color: #999;
            font-size: 12px;
          }
          a {
            margin-left: 5px;
            width: 106px;
            font-size: 13px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
        }
      }
    }
  }
  .ty-box {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    align-items: center;
    .ty-l {
      display: flex;
      flex-direction: column;
      .ai {
        width: 142px;
        color: #333;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      .aii {
        color: #999;
      }
    }
    .ty-r {
      font-size: 12px;

      .iconi {
        display: inline-block;
        width: 10px;
        height: 11px;
        background: url("~@/assets/image/icon2.png") no-repeat -9999px -9999px;
        // 不透明度
        opacity: 0.9;
        margin-right: 20px;
        background-position: -69px -455px;
      }
      .iconii {
        display: inline-block;
        width: 10px;
        height: 11px;

        background: url("~@/assets/image/icon2.png") no-repeat -9999px -9999px;
        opacity: 0.9;
        background-position: -87px -454px;
      }
    }
  }
}
</style>
